<template>
    <div class="statistics">
        <div class="title">数据总览</div>
        <div class="statistics_today">
            <div class="statistics_today_items" v-for="(item, index) in todayStatisticsList" :key="index">
                <div :class="`arrow${index} arrow`" @click="statisticsClick(index)" v-if="index == 0 || index == 1">
                    <img src="@/assets/images/icon_jiantou.png" alt="">
                </div>
                <div class="statistics_today_items_left" :style="{ 'width': index == 2 ? '30%' : '40%' }">
                    <div class="titles">{{ item.title }}</div>
                    <div class="number">{{ item.number }}</div>
                    <div class="compare">
                        <div class="des">较前日</div>
                        <div :class="Number(item.compare) > 0 ? 'compare_numebr' : 'compare_numebr_decline'">{{
                            Math.abs(Number(item.compare)) }}</div>
                        <img class="compare_icon" :src="Number(item.compare) > 0 ? rise : decline" alt="">
                    </div>
                </div>
                <brokenLine :chartData="item.chartData" v-if="index == 0" class="statistics_today_items_rightcol" />
                <brokenLines :chartData="item.chartData" v-if="index == 3" class="statistics_today_items_rightcols" />
                <columnar :chartData="item.chartData" v-if="index == 1" class="statistics_today_items_right" />
                <ring :chartData="item.chartData" v-if="index == 2" class="statistics_today_items_rightring" />
            </div>
        </div>
        <div class="title">各部门品类分析</div>
        <div class="content">
            <div class="content_category">
                <ringThree :chartData="ringThreeData" class="statistics_today_items_ringThree" />
                <div class="content_category_lab">
                    <div class="content_category_item">
                        <img src="@/assets/images/icon_lingdang.png" alt="" class="content_category_lingdang">
                        <div class="content_category_title">今日AB货商家</div>
                    </div>
                    <div v-for="(item, index) in abList" :key="index" class="content_category_ab">{{ item }}</div>
                </div>
            </div>
            <div class="content_anchor_ranking">
                <div class="content_anchor_ranking_button">
                    <div v-for="(item, index) in anchorList" :key="index" @click="rankingButtonClick(index)"
                        :class="rankingButtonActive == index ? 'content_anchor_button_active' : 'content_anchor_button'">
                        {{ item }}</div>
                </div>
                <div class="content_anchor_ranking_list">
                    <el-table class="anchorTable" v-loading="loading" :data="personData">
                        <el-table-column label="排名" align="center" type="index" width="60" />
                        <el-table-column label="主播" align="center" prop="anchor" />
                        <el-table-column label="售卖数量" align="center" prop="num" />
                        <el-table-column label="销售额" align="center" prop="salesVolume" />
                    </el-table>
                </div>
            </div>
            <div class="content_data">
                <div :class="contentButtonActive == index ? 'content_data_button_active' : 'content_data_button'"
                    v-for="(item, index) in contentButtonList" :key="index" @click="contentButtonClick(index)">
                    {{ item }}
                </div>
                <div class="content_data_statistics">
                    <div class="content_data_statistics_title">
                        <div class="line"></div>
                        <div>{{ contentButtonList[contentButtonActive] + '统计' }}</div>
                    </div>
                    <lineStatistics v-loading="statisticsLoading" :chartData="lineStatisticsData"
                        class="statistics_today_items_lineStatistics" />
                </div>
            </div>
            <div class="content_investment_rabking">
                <div class="content_anchor_ranking_button">
                    <div v-for="(item, index) in investmentList" :key="index" @click="investmentButtonClick(index)"
                        :class="investmentButtonActive == index ? 'content_anchor_button_active' : 'content_anchor_button'">
                        {{ item }}</div>
                </div>
                <div class="content_anchor_ranking_list">
                    <el-table class="investmentTable" v-loading="loadings" :data="investmentData">
                        <el-table-column label="排名" align="center" type="index" width="60" />
                        <el-table-column label="招商员" v-if="investmentButtonActive == 0" align="center"
                            prop="userName" />
                        <el-table-column label="所属部门" align="center" prop="deptName" />
                        <el-table-column label="选品数" align="center" prop="count" />
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="statistics" lang="ts">
import brokenLine from './components/brokenLine.vue'
import brokenLines from './components/brokenLines.vue'
import columnar from './components/columnar.vue'
import ring from './components/ring.vue'
import ringThree from './components/ringThree.vue'
import lineStatistics from './components/lineStatistics.vue'
import rise from '@/assets/images/icon_shangsheng.png';
import decline from '@/assets/images/icon_xiajiang.png';
import { hourMerchant, eachepartment, connectionMerchant, commodityCount, investmentSelection, attractData, anchorSelection } from '@/api/group/statistics/index'
const router = useRouter();
const contentButtonActive = ref(0)
const rankingButtonActive = ref(0)
const investmentButtonActive = ref(0)
const loading = ref(false)
const loadings = ref(false)
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const personData = ref([
    { anchor: '电商一部', num: 0, salesVolume: '0' },
    { anchor: '电商二部', num: 0, salesVolume: '0' },
    { anchor: '电商三部', num: 0, salesVolume: '0' },
    { anchor: '电商四部', num: 0, salesVolume: '0' },
    { anchor: '电商五部', num: 0, salesVolume: '0' },
])
const investmentData = ref([
    { merchants: '招商员1', num: 0, department: '所属部门1' },
    { merchants: '招商员2', num: 0, department: '所属部门2' },
    { merchants: '招商员3', num: 0, department: '所属部门3' },
    { merchants: '招商员4', num: 0, department: '所属部门4' },
    { merchants: '招商员5', num: 0, department: '所属部门5' },
])
const todayStatisticsList = <any>ref([
    {
        title: '昨日建联商家', number: 0, compare: 0, chartData: [
            { yesterday: [], beforeYesterday: [] }
        ]
    },
    {
        title: '昨日新增商品', number: 0, compare: 0, chartData: []
    },
    {
        title: '昨日选品数', number: 0, compare: '0', chartData: [
            {
                value: 0,
                name: '食品',
            },
            {
                value: 0,
                name: '酒茶',
            },
            {
                value: 0,
                name: '箱包',
            },
            {
                value: 0,
                name: '百货',
            },
            {
                value: 0,
                name: '服装',
            },
            {
                value: 0,
                name: '鞋帽',
            },
        ]
    },
    {
        title: '昨日销售额', number: 0, compare: '0', chartData: [
            { 'today': [0, 0, 0, 0, 0, 0, 0], 'yesterday': [0, 0, 0, 0, 0, 0, 0] }
        ]
    }
])
const ringThreeData = ref({
    investment: [
        {
            value: 0,
            name: '食品',
            label: 'food'
        },
        {
            value: 0,
            name: '酒茶',
            label: 'wine'
        },
        {
            value: 0,
            name: '箱包',
            label: 'bags'
        },
        {
            value: 0,
            name: '百货',
            label: 'department'
        },
        {
            value: 0,
            name: '服装',
            label: 'clothing'
        },
        {
            value: 0,
            name: '鞋帽',
            label: 'shoes'
        },
    ],
    product: [
        {
            value: 0,
            name: '食品',
            label: 'food'
        },
        {
            value: 0,
            name: '酒茶',
            label: 'wine'
        },
        {
            value: 0,
            name: '箱包',
            label: 'bags'
        },
        {
            value: 0,
            name: '百货',
            label: 'department'
        },
        {
            value: 0,
            name: '服装',
            label: 'clothing'
        },
        {
            value: 0,
            name: '鞋帽',
            label: 'shoes'
        },
    ],
    operate: [
        {
            value: 0,
            name: '食品',
            label: 'food'
        },
        {
            value: 0,
            name: '酒茶',
            label: 'wine'
        },
        {
            value: 0,
            name: '箱包',
            label: 'bags'
        },
        {
            value: 0,
            name: '百货',
            label: 'department'
        },
        {
            value: 0,
            name: '服装',
            label: 'clothing'
        },
        {
            value: 0,
            name: '鞋帽',
            label: 'shoes'
        },
    ]
})
const contentButtonList = ref(['招商部数据', '产品部数据', '运营部数据'])
const abList = ref([
    // '世界如此美好',
    // '为甚么如此暴躁',
    // '多读读书',
    // '核酸觉得没错的',
    // '送鸡蛋的小女孩'
])
const lineStatisticsData = ref({
    datas: new Array(14).fill(0),
    listing: new Array(14).fill(0),
    warehousing: new Array(14).fill(0),
    selections: new Array(14).fill(0)
})
const statisticsLoading = ref(false)
const anchorList = ref(['主播售卖榜'])
const investmentList = ref(['招商选品榜', '主播选品榜'])
/** 数据统计点击事件 */
const contentButtonClick = async (index: number) => {
    contentButtonActive.value = index
    statisticsLoading.value = true
    // 招商部数据
    if (index == 0) {
        await getAttractData();
        statisticsLoading.value = false
    } else if (index == 1) {// 产品部数据
        lineStatisticsData.value = {
            datas: new Array(14).fill(0),
            listing: new Array(14).fill(0),
            warehousing: new Array(14).fill(0),
            selections: new Array(14).fill(0)
        }
        statisticsLoading.value = false
    } else if (index == 2) { //运营部数据
        lineStatisticsData.value = {
            datas: new Array(14).fill(0),
            listing: new Array(14).fill(0),
            warehousing: new Array(14).fill(0),
            selections: new Array(14).fill(0)
        }
        statisticsLoading.value = false
    }
}
/** 售卖榜单点击事件 */
const rankingButtonClick = (index: number) => {
    rankingButtonActive.value = index
}
/** 选品榜单点击事件 */
const investmentButtonClick = (index: number) => {
    investmentButtonActive.value = index
    if (index == 0) {
        getInvestmentSelection();
    } else if (index == 1) {
        getAnchorSelection()
    }
}
/** 数据总览跳转 */
const statisticsClick = (index: number) => {
    // 昨日建联商家
    if (index == 0) {
        router.push('/system/dataBrand/jlBusiness')
    } else if (index == 1) {
        router.push('/system/dataBrand/addProducts')
    }
}
/** 获取昨日建联商家24小时 */
const getHourMerchant = async () => {
    const res = await hourMerchant()

    const beforeYesterday = res.data.beforeYesterday.map((item: { COUNT: number, HOUR: number }) => {
        return item.COUNT
    })
    const yesterday = res.data.yesterday.map((item: { COUNT: number, HOUR: number }) => {
        return item.COUNT
    })
    todayStatisticsList.value[0].chartData = [
        {
            beforeYesterday: beforeYesterday,
            yesterday: yesterday
        }
    ]
}
/** 昨日各部门品类分析 */
const getEachepartment = async () => {
    const res = await eachepartment({})
    // 昨日新增商品柱状图
    todayStatisticsList.value[1].chartData = [
        res.data.food, // 食品
        res.data.wine, // 酒茶
        res.data.bags, // 箱包
        res.data.department, // 百货
        res.data.clothing, // 服装
        res.data.shoes, // 鞋帽
    ]
    // 各部门品类分析招商部
    ringThreeData.value.investment = ringThreeData.value.investment.map(item => {
        return {
            ...item,
            value: res.data[item.label]
        }
    })

}
/** 昨日建联商家及较前日涨幅数量 */
const getConnectionMerchant = async () => {
    const res = await connectionMerchant({})
    todayStatisticsList.value[0].number = res.data.todayQuantity
    todayStatisticsList.value[0].compare = res.data.lessThanYesterday
}
/** 昨日新增商品及较前日涨幅数量 */
const getCommodityCount = async () => {
    const res = await commodityCount({})
    todayStatisticsList.value[1].number = res.data.todayQuantity
    todayStatisticsList.value[1].compare = res.data.lessThanYesterday
}
/** 
 * 招商选品榜 
 * 1. 查询昨天数据
 * */
const getInvestmentSelection = async () => {
    loadings.value = true
    const dates = year + "" + '-' + (month < 10 ? "0" + month : month + "") + '-' +
        (date < 10 ? "0" + date : date + "")
    const res = await investmentSelection({ startTime: dates, endTime: dates })
    investmentData.value = res.data.splice(0, 5)
    loadings.value = false
}
/** 折线图数据统计 */
const getAttractData = async () => {
    const res = await attractData()
    lineStatisticsData.value.datas = res.data.map((item: any) => {
        return item.date.split('-')[1] + '-' + item.date.split('-')[2]
    })
    // 上架商品
    lineStatisticsData.value.listing = res.data.map((item: any) => {
        return item.listingProductCount
    })
    // 入库商品
    lineStatisticsData.value.warehousing = res.data.map((item: any) => {
        return item.warehousingProductCount
    })
    // 主播选品
    lineStatisticsData.value.selections = res.data.map((item: any) => {
        return item.anchorSelectionCount
    })

    // 频繁切换数据丢失问题
    if (contentButtonActive.value !== 0) {
        lineStatisticsData.value = {
            datas: new Array(14).fill(0),
            listing: new Array(14).fill(0),
            warehousing: new Array(14).fill(0),
            selections: new Array(14).fill(0)
        }
    }
}
/** 
 * 主播选品榜单
 * 1. 查询昨天数据
 */
const getAnchorSelection = async () => {
    loadings.value = true
    const dates = year + "" + '-' + (month < 10 ? "0" + month : month + "") + '-' +
        (date < 10 ? "0" + date : date + "")
    const res = await anchorSelection({ startTime: dates, endTime: dates })
    investmentData.value = res.data.splice(0, 5)
    loadings.value = false
}
onMounted(() => {
    getHourMerchant();
    getEachepartment();
    getConnectionMerchant();
    getCommodityCount();
    getInvestmentSelection();
    getAttractData();
})
</script>
<style scoped lang="scss">
.statistics {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;

    :deep(.el-table__inner-wrapper::before) {
        height: 0 !important;
    }

    .title {
        font-weight: 600;
        font-size: 17px;
        color: #1A1B1C;
        letter-spacing: 2px;
    }

    .statistics_today {
        width: 100%;
        height: 20vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 20px;

        .statistics_today_items {
            height: 100%;
            width: 23%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;

            .arrow {
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                cursor: pointer;
                right: 0;
                top: 0;
                z-index: 100;

                img {
                    width: 16px;
                    height: 16px;
                }
            }

            .arrow0 {
                background: #1C60FF;
                border-radius: 0px 5px 0px 5px;
            }

            .arrow1 {
                background: #00B42B;
                border-radius: 0px 5px 0px 5px;
            }

            .statistics_today_items_left {
                width: 40%;
                height: 100%;
                padding: 20px;
                padding-right: 0;
                font-size: 14px;
                display: flex;
                flex-wrap: wrap;

                .titles {
                    // margin-bottom: 70px;
                    width: 100%;
                }

                .number {
                    font-size: 25px;
                }

                .compare {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    justify-content: space-between;

                    .compare_numebr {
                        color: #F54242;
                    }

                    .compare_numebr_decline {
                        color: #00B42B;
                    }

                    .compare_icon {
                        width: 11px;
                        height: 14px;
                    }
                }
            }

            .statistics_today_items_right {
                width: 60%;
                height: 100%;
            }

            .statistics_today_items_rightcol {
                width: 60%;
                height: 100%;
            }

            .statistics_today_items_rightcols {
                width: 60%;
                height: 100%;
            }

            .statistics_today_items_rightring {
                width: 70%;
                height: 100%;
            }
        }

        .statistics_today_items:nth-of-type(1) {
            background: linear-gradient(134deg, #F1F8FE 0%, #D4ECFF 100%);
            border-radius: 5px;
        }

        .statistics_today_items:nth-of-type(2) {
            background: linear-gradient(134deg, #F5FEF2 0%, #DDFCE8 100%);
            border-radius: 5px;
        }

        .statistics_today_items:nth-of-type(3) {
            background: linear-gradient(134deg, #F5F5FF 0%, #E1E1FF 100%);
            border-radius: 5px;
        }

        .statistics_today_items:nth-of-type(4) {
            background: linear-gradient(134deg, #F1F8FE 0%, #D4ECFF 100%);
            border-radius: 5px;
        }
    }

    .content {
        width: 100%;
        height: calc(80vh - 230px);
        display: flex;
        // align-items: center;
        flex-wrap: wrap;
        // padding: 20px;
        align-content: space-between;
        justify-content: space-between;

        .content_category {
            width: 70%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .statistics_today_items_ringThree {
                width: 80%;
                height: 100%;
            }

            .content_category_lab {
                // width: 20%;
                width: 260px;
                height: 90%;
                border-radius: 20px;
                padding: 20px;
                box-shadow: 0px 2px 19px 0px #B8D2FF;
                border: 1px solid #61B3FF;

                .content_category_item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    margin-bottom: 20px;

                    .content_category_lingdang {
                        width: 24px;
                        height: 24px;
                    }

                    .content_category_title {
                        font-size: 17px;
                        font-weight: 600;
                        margin-left: 20px;
                    }
                }

                .content_category_ab {
                    width: 100%;
                    margin: auto;
                    line-height: 27px;
                    text-align: center;
                }
            }
        }

        .content_anchor_ranking {
            width: 26%;
            height: 50%;

            .content_anchor_ranking_button {
                display: flex;
                margin-bottom: 10px;

                .content_anchor_button {
                    height: 45px;
                    width: 120px;
                    cursor: pointer;
                    margin-right: 20px;
                    text-align: center;
                    line-height: 45px;
                    color: #249EFF;
                }

                .content_anchor_button_active {
                    height: 45px;
                    width: 120px;
                    background-color: #DEF1FF;
                    color: #249EFF;
                    text-align: center;
                    line-height: 45px;
                    margin-right: 20px;
                    border-radius: 8px;
                    cursor: pointer;
                    font-weight: 600;
                }
            }

            .content_anchor_ranking_list {
                width: 100%;
                height: calc(100% - 55px);

                .anchorTable {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }

        .content_data {
            width: 70%;
            height: 50%;

            display: flex;
            flex-wrap: wrap;

            .content_data_button {
                height: 45px;
                width: 100px;
                background-color: #F0F0F0;
                color: #B0B0B0;
                text-align: center;
                line-height: 45px;
                margin-right: 20px;
                border-radius: 8px;
                cursor: pointer;
            }

            .content_data_button_active {
                height: 45px;
                width: 100px;
                background-color: #D7E9FF;
                color: #249EFF;
                text-align: center;
                line-height: 45px;
                margin-right: 20px;
                border-radius: 8px;
                cursor: pointer;
            }

            .content_data_statistics {
                width: 100%;
                margin-top: 10px;
                height: calc(100% - 55px);
                padding: 10px;
                // border: 1px solid;
                box-shadow: 0px 2px 12px 0px rgba(213, 215, 224, 0.59);

                .content_data_statistics_title {
                    display: flex;
                    align-items: center;
                    font-size: 18px;

                    .line {
                        margin-right: 5px;
                        width: 8px;
                        height: 17px;
                        background-color: #5698F5;
                    }
                }

                .statistics_today_items_lineStatistics {
                    width: 100%;
                    height: calc(100% - 22px);
                }
            }
        }

        .content_investment_rabking {
            width: 26%;
            height: 59%;
            padding-top: 2%;

            .content_anchor_ranking_button {
                display: flex;
                margin-bottom: 10px;

                .content_anchor_button {
                    height: 45px;
                    width: 120px;
                    cursor: pointer;
                    margin-right: 20px;
                    text-align: center;
                    line-height: 45px;
                    color: #249EFF;
                }

                .content_anchor_button_active {
                    height: 45px;
                    width: 120px;
                    background-color: #DEF1FF;
                    color: #249EFF;
                    text-align: center;
                    line-height: 45px;
                    margin-right: 20px;
                    border-radius: 8px;
                    cursor: pointer;
                    font-weight: 600;
                }
            }

            .content_anchor_ranking_list {
                width: 100%;
                height: calc(100% - 65px);

                .investmentTable {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }
    }
}
</style>